<template>
  <div>
    <div class="iconfont">
      <el-row>
        <el-col :span="24">
          <div class="grid-content bg-purple"></div>
        </el-col>
        <el-col :span="24">
          <el-col :span="10">
            <div class="grid-content bg-purple"></div>
          </el-col>
          <el-col :span="4">
            <div class="grid-content bg-purple ico-style">登陆</div>
          </el-col>
          <el-col :span="10">
            <div class="grid-content bg-purple"></div>
          </el-col>
        </el-col>
        <el-col :span="24">
          <div class="grid-content bg-purple"></div>
        </el-col>
        <el-col :span="24">
          <div class="demo-input-suffix">
            <el-col :span="24">
              <el-col :span="2">
                <div class="grid-content bg-purple"></div>
              </el-col>
              <el-col :span="4" class="title">账号:</el-col>
              <el-col :span="16">
                <el-input placeholder="请输入用户名" v-model="user.telNumber" clearable></el-input>
              </el-col>
            </el-col>
            <el-col :span="24">
              <div class="grid-content bg-purple"></div>
            </el-col>
            <el-col :span="24">
              <el-col :span="2">
                <div class="grid-content bg-purple"></div>
              </el-col>
              <el-col :span="4" class="title">密码:</el-col>
              <el-col :span="16">
                <form>
                  <el-input placeholder="请输入密码" v-model="user.passWord" show-password></el-input>
                </form>
              </el-col>
            </el-col>
            <el-col :span="24">
              <el-col :span="5">
                <div class="grid-content bg-purple"></div>
              </el-col>
              <el-col :span="4">
                <div class="grid-content bg-purple ico-style">
                  <el-button type="primary" style="width:250px;" @click="disembark" :disabled="isdisabled">登录</el-button>
                </div>
                <div class="grid-content bg-purple ico-style" style="margin-top: 20px;">
                  <el-button type="primary" style="width:250px;" @click="Register()">注册</el-button>
                </div>
                <div
                  class="grid-content bg-purple ico-style"
                  style="margin-top: 20px;width: 250px;"
                >
                  <el-button 
                  type="text" 
                  @click="centerDialogVisible = true"
                  >忘记密码</el-button>
                  <el-checkbox 
                  v-model="checked" 
                  class="rememberme" 
                  style="color:#409EFF;"
                  >记住密码</el-checkbox>
                  <el-dialog
                    title="请选择一种找回方式"
                    :visible.sync="centerDialogVisible"
                    width="85%"
                    center>
                    <span style="font-size: 15.5px;text-align: center;">如果绑定了邮箱可以尝试用邮箱找回密码。</span>
                    <span slot="footer" class="dialog-footer">
                      <el-button @click="forget_tele">手机号码</el-button>
                      <el-button @click="forget_mail">电子邮箱</el-button>
                    </span>
                  </el-dialog>
                </div>
              </el-col>
              <el-col :span="10">
                <div class="grid-content bg-purple"></div>
              </el-col>
            </el-col>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  name: "Login",
  data() {
    return {
      checked: '',
      labelPosition: "right",
      centerDialogVisible: false,
      formLabelAlign: {
        name: "",
        region: "",
        type: ""
      },
      user: {
        telNumber: "",
        passWord: ""
      }
    };
  },
  methods: {
    forget_mail() {
      this.centerDialogVisible = false
      this.$router.push('/forgetPasswrod')
    },
    forget_tele() {
      this.centerDialogVisible = false
      this.$router.push('/forgetpsd_tele')
    },
    disembark() {
      let _this = this;
      console.log(_this.user)
      if (true) {}
      this.$axios
        .post("http://127.0.0.1:8888/passport/login",_this.user)
        .then(res => {
          if(true) {
            window.localStorage.removeItem('mine_dates_userId')
            window.localStorage.setItem('mine_dates_userId', JSON.stringify(res.data.userId))

            window.localStorage.removeItem('mine_dates')
            window.localStorage.setItem('mine_dates', JSON.stringify(true))
            
            window.localStorage.removeItem('mine_dates_remberpsd')
            window.localStorage.setItem('mine_dates_remberpsd', JSON.stringify(this.checked))

            window.localStorage.removeItem('mine_dates_userName')
            window.localStorage.setItem('mine_dates_userName', JSON.stringify(_this.user.username))

            window.localStorage.removeItem('mine_dates_passWord')
            window.localStorage.setItem('mine_dates_passWord', JSON.stringify(_this.user.password))
            this.$router.push("/");
          }
        }).catch(e => {
          alert(e);
        });
    },
    Register(){
       this.$router.push("/Register");
    },
    getRemeber() {
      this.checked = JSON.parse(localStorage.getItem('mine_dates_remberpsd'))
      if (this.checked) {
        this.user.username = JSON.parse(localStorage.getItem('mine_dates_userName'))
        this.user.password = JSON.parse(localStorage.getItem('mine_dates_passWord'))
        console.log('123')
      }
    }
  },
  mounted() {
    this.getRemeber();
  },
  computed: {
    isdisabled() {
        if (!this.user.telNumber || !this.user.passWord) {
          return true
        }else {
          return false
        }
    }
  }
}
</script>

<style scoped>
.ico-style {
  margin-top: 50px;
  text-align: center;
  font-size: 30px;
  color: #409eff;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.title {
  margin-top: 10px;
}
</style>